<template>
	<view class="tab">
		<u-row class="row" gutter="18rpx">
			<block v-for="tab in tabList" :key="tab.id">
				<u-col :span="span">
					<view :class="['tab-item', {'active': tab.index === active}]" @click="handleClick(tab.index)">
						{{tab.title}}
					</view>
				</u-col>
			</block>
		</u-row>
	</view>
</template>

<script>
	export default {
		name: 'tabs',
		props: {
			// 栅格占据的列数，总12等分
			span: {
				type: [String, Number],
				default: "6"
			},
			tabList: {
				type: Array,
				default: () => []
			},
			current: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				active: 0
			}
		},
		watch: {
			current: {
				handler(nVal, oVal){
					this.active = nVal
				}
			}
		},
		methods: {
			handleClick(idx) {
				if (this.active === idx) return
				this.active = idx
				this.$emit('click', this.active)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tab {
		.row {
			display: flex;
			margin: 18rpx 21.5rpx;
			
			.tab-item {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 110rpx;
				background: #FFFFFF;
				border-radius: 15rpx;
				font-size: 30rpx;
				color: #56616B;
				transition: all 0.1s ease;
			}
			
			.active {
				background: #3D8BFF;
				box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(14, 78, 173, 0.32);
				color: #FFFFFF;
			}
		}
	}
</style>